<template>
	<view class="welcome-box">
		<image class="image-bg" src="../../static/background.jpg" />
		<view class="welcome-text-one">
			踏上
		</view>
		<view class="welcome-text-two">
			梦想の旅
		</view>
		<view class="btns">
			<view class="btn">
				<button type="primary" class="login" @tap='login()'>登录</button>
			</view>
			<view class="btn">
				<button type="primary" class="register" @tap='register()'>注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			login() {
				uni.navigateTo({
					url: '../login/login',
				});
			},
			register() {
				uni.navigateTo({
					url: '../register/register',
				});
			}
		},
	}
</script>

<style lang="scss">
	.image-bg {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	
	.welcome-text-one{
		position: absolute;
		z-index: 0;
		width: 100%;
		top: 30px;
		display: flex; //弹性盒子模型
		box-sizing: border-box; //为了盒子模型不撑开容器本身大小
		flex-direction: row; //布局方式
		flex-wrap: wrap; //横向排列
		justify-content: center;   //水平居中
		align-items : center;      //垂直居中
		font-size: 60px;
		font-family: "宋体";
		
		background-image: -webkit-linear-gradient(bottom, #D16BA5, #86A8E7, #5FFBF1); //为文本元素提供渐变背景
		-webkit-background-clip: text;        //用文本剪辑背景，用渐变背景作为颜色填充文本。
		-webkit-text-fill-color: transparent; //使用透明颜色填充文本。
	}
	
	.welcome-text-two{
		position: absolute;
		z-index: 0;
		width: 100%;
		top: 100px;
		display: flex; //弹性盒子模型
		box-sizing: border-box; //为了盒子模型不撑开容器本身大小
		flex-direction: row; //布局方式
		flex-wrap: wrap; //横向排列
		justify-content: center;   //水平居中
		align-items : center;      //垂直居中
		font-size: 50px;
		font-family: "楷体";
		
		background-image: -webkit-linear-gradient(bottom, #D16BA5, #86A8E7, #5FFBF1); //为文本元素提供渐变背景
		-webkit-background-clip: text;        //用文本剪辑背景，用渐变背景作为颜色填充文本。
		-webkit-text-fill-color: transparent; //使用透明颜色填充文本。
	}

	.btns {
		position: relative;
		z-index: 0;
		top:500px;
		display: flex; //弹性盒子模型
		box-sizing: border-box; //为了盒子模型不撑开容器本身大小
		flex-direction: row; //布局方式
		flex-wrap: wrap; //横向排列
		justify-content: center;   //水平居中
		align-items : center;      //垂直居中

		.btn {
			display: flex; 
			width: 30%;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center; //内容水平居中
			align-items: center;
			padding: 30px;

			.login {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border-radius: 8px;
				//background-color: #0498f4;
				//color: white;
			}

			.register {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border-radius: 8px;
				//background-color: #0498f4;
				//color: white;
			}
		}
	}
</style>
